<template>
<view>
	<view class='title'>群发助手:</view>
	<view class="item_list">
		<view class="item" :class="{borderTrue : info.id == item.id}" 
		v-for="(item,index) in list" :key="index" @click="info = item"
		>{{item.name}}</view>
	</view>
	<view class="money">
		<text class="new">价格:{{info.score}}积分</text>
	</view>
	<view class="content">
		<view class="title">会员权益:</view>
		<view class="remark">
			{{info.remark}}
		</view>
	</view>
	
	<view class="footer">
	    <view>共计:{{info.score}}积分</view>
	    <view @click="payquery">支付</view>
	</view>
	<uni-popup ref="popup" type="bottom">
		<view class="payclass">
			<view class="pop_top">
				<view class="po_top_1">订单确认</view>
				<image @click="close" src="/static/img/close.png"></image>
			</view>
			<view class="tr">
				<view class="th2">商品总价</view>
				<view class="th3">{{info.score}}积分</view>
			</view>
			<button v-if="payTrue" @click="pay" class="pboutom">兑换</button>
		</view>
	</uni-popup>
</view>
</template>
<script>
import request from '@/util/request.js'
import uniPopup from '@/modules/uni-popup/uni-popup.vue'
export default {
	data() {
		return{
			list:[],
			info:{},
			payTrue:true
		}
	},
	components: {uniPopup},
	onLoad:function(){
		this.getVip()
	},
	methods: {
		getVip:function(){
			var that = this
			request({
				url: 'vip/group',
				method: 'get',
				success: (res) => {
					that.list = res.data.data
					that.info = res.data.data[0]
				}
			})
		},
		payquery:function(){
			this.payTrue = true
			this.$refs.popup.open('center')
		},
		close:function(){
			this.$refs.popup.close()
		},
		pay:function(){
			this.payTrue = false
			uni.showToast({
				title:'暂未接入',
				icon: "none", 
				position:'bottom',
			});
			return;
		},
	}
}
</script>
<style>
.title{
    font-weight: bold;
    font-size:18px;
    border-bottom: 1rpx dashed #cccccc;
    height:70rpx;
	line-height: 70rpx;
	padding-left:20rpx;
}
.item_list{
    padding-top:20rpx;
	padding-left:2%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.item{
    width:46%;
    height:80rpx;
    line-height: 80rpx;
    text-align: center;
    margin-right: 20rpx;
    margin-top:20rpx;
    border:1rpx solid #cccccc;
}
.money{
    padding:20rpx 20rpx 20rpx 20rpx;
    display: flex;
    flex-direction: row;
}
.new{
    width:46%;
    background:#44b549;
    color: #ffff;
    height:80rpx;
    line-height: 80rpx;
    text-align: center;
    margin-left:20rpx;
}
.content{
    padding:20rpx 20rpx 20rpx 20rpx;
}
.borderTrue{border:2rpx solid #b30000;}
.remark{
    padding-top:15rpx;
}
.footer{
    display: flex;
    position: fixed;
    z-index: 999;
    left: 0;
    bottom: 0;
    width: 100%;
    height:100rpx;
    border-top: 3px solid #e6e6e6;
}
.footer view{width:50%;display: flex;justify-content: center;align-items: center;}
.footer :nth-child(1){background:#fff}
.footer :nth-child(2){background:#FF7800;color:#FFFFFF}
.payclass{
	width:600rpx;
	height:300rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
}
.pop_top{
	display: flex;
	height:80rpx;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.pop_top image{
	width:50rpx;
	height:50rpx;
}
.po_top_1{
	width:70%;
	font-weight: bold;
	font-size: 17px;
}
.tr {
    display: flex;
    width: 100%;
    justify-content: center;
    height: 70rpx;
    align-items: center;
    border-bottom:1px dashed #cccccc;
}
.th2{
	width: 30%;
	justify-content: center;
	display: flex;
	height:60rpx;
	align-items: center;
}
.th3 {
	width: 70%;
	justify-content: center;
	display: flex;
	height:60rpx;
	align-items: center;
}
.pboutom{
	width:50%;margin-top:20px;
	height:30px;line-height:30px;
	background: #44b549;
	color:#FFFFFF;
	border-radius: 30rpx;
}
</style>